<template>
  <div class="wrap-helper-show g-flex-column-sb">
    <div :style="{ height:bannerHeight+'px', background: `url(${imgPath}${topBanner[page]}) no-repeat`}" class="banner" >
      <div class="shop g-flex-c" @click="buy"><img :src="imgPath+'btn-icon-shop.png'" alt=""><span>去购买</span></div>
    </div>
    <div class="icon g-flex-sa">
      <div class="g-flex-column-sb" v-for="(item,index) in middleIcon[page]" :key="index">
        <img :src="imgPath+item.img" alt=""><span>{{item.label}}</span>
      </div>
    </div>
    <div class="left-word g-flex-sb" v-for="(item,index) in caseInfo[page]" :key="index">
      <template v-if="item.isImgLeft">
        <img :src="imgPath+item.img" alt="">
        <div>{{item.info}}</div>
      </template>
      <template v-else>
        <div>{{item.info}}</div>
        <img :src="imgPath+item.img" alt="">
      </template>
    </div>
    <Footer/>
  </div>
</template>
<script>
import mixins from '../../components/onResize/mixin'
import Footer from './components/footer'
export default {
  mixins: [mixins],
  components: {
    Footer
  },
  data() { 
    return {
      bannerHeight: 400,
      page:'care',
      imgPath: `${this.$ossUrl}showPage/helper/`,
      topBanner:{
        care:'top-banner-care.png',
        shouts:'top-banner-shouts.png'
      },
      middleIcon:{
        care: [
          {label:'油站全会员',img:'show-icon-user2.png'},
          {label:'主动触达',img:'show-icon-touch2.png'},
          {label:'获客成本低',img:'show-icon-money.png'},
          {label:'易操作',img:'show-icon-operate.png'}
        ],
        shouts: [
          {label:'全网客户',img:'show-icon-user1.png'},
          {label:'特色展示',img:'show-icon-touch1.png'},
          {label:'获客成本低',img:'show-icon-money.png'},
          {label:'易操作',img:'show-icon-operate.png'}
        ]
      },
      caseInfo:{
        care: [
          {
            img:'case-care1.png',
            isImgLeft: false,
            info:'能+通过支付即会员的方式沉淀会员信息，商家在重大节日、店庆日、生日等活动中进行会员关怀，比如给油站会员自动发送优惠券，提升客户好感度，提高复购率和忠诚度，延长客户生命周期。'
          },
          {
            img:'case-care2.png',
            isImgLeft: true,
            info:'同时通过各种关怀方式，强化品牌认知度，有利于口碑传播产生裂变效果，实现客户增长。'
          }
        ],
        shouts: [
          {
            img:'case-shouts1.png',
            isImgLeft: false,
            info:'能+突出展示油站多样化优惠活动，利用视觉与听觉的通感，丰富油站店铺内容，解决营销内容单一的痛点。'
          },
          {
            img:'case-shouts2.png',
            isImgLeft: true,
            info:'商家自定义站长喊话内容，比如消费赠送洗车服务、送水等，增加油站卖点'
          }
        ]
      }
    } 
  },
  mounted(){
    this.initPage()
  },
  methods: {
    initPage(){
      let {page} = this.$route.query
      if(page) this.page = page
    },
    buy() {
      this.$router.push({ path: '/marketShop/shopCenter' })
    },
    setSize () {
      // 通过浏览器宽度(图片宽度)计算高度
      if(this.screenWidth < 1080) return
      this.bannerHeight = 400 / 1920 * this.screenWidth;
    },
  }
}
</script>
<style lang="less" scoped>
.wrap-helper-show{
  width: 100%;
  padding: 10px 0;
  background: #fff;
}
.banner{
  width: 100%;
  position: relative;
  background-size: 100%!important;
  margin-bottom: 20px;
  .shop{
    position: absolute;
    width: 240px;
    top: 70%;
    left: 8%;
    height: 40px;
    background: #FFFFFF;
    box-shadow: 0px 2px 4px 0px #034CAA;
    border-radius: 25px;
    font-size: 20px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #2966FF;
    cursor: pointer;
    >img{
      display: inline-block;
      width: 20px;
      height: 20px;
      margin-right: 10px;
    }
  }
}
.icon{
  width: 100%;
  height: 150px;
  padding: 0 100px;
  >div{
    width: 140px;
    height: 150px;
    >img{
      display: block;
      width: 100px;
      height: 100px;
    }
    >span:nth-child(2) {
      font-size: 20px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }
  }
}
.left-word{
  width: 70%;
  height: 360px;
  font-size: 20px;
  font-family: PingFangSC-Medium, PingFang SC;
  font-weight: 500;
  color: #333333;
  line-height: 40px;
  >div{
    width: 360px;
  }
  .computer{
    display: block;
    width: 354px;
    height: 200px;
    margin-top: 80px;
  }
  >img{
    display: block;
    width: 283px;
    height: 200px; 
  }
}
</style>